
<template>
  <div class="form-container">
    <!--      需要非空校验-->
    <el-form ref="form" :model="formData" label-width="80px" :rules="rules"  >
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="性别：" style="font-weight: bold;" prop="gender">
            <el-radio-group v-model="formData.gender">
              <el-radio label="Male">男</el-radio>
              <el-radio label="Female">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="年龄：" style="font-weight: bold;" prop="age">
            <el-input type="number" v-model.number="formData.age" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="高血压：" style="font-weight: bold;" prop="hypertension">
            <el-radio-group v-model="formData.hypertension">
              <el-radio label="0">没有</el-radio>
              <el-radio label="1">有</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="心脏病：" style="font-weight: bold;" prop="heart_disease">
            <el-radio-group v-model="formData.heart_disease">
              <el-radio label="0">没有</el-radio>
              <el-radio label="1">有</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="婚否：" style="font-weight: bold;" prop="ever_married">
            <el-radio-group v-model="formData.ever_married">
              <el-radio label="Yes">是</el-radio>
              <el-radio label="No">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="工作类型：" style="font-weight: bold;" label-width="120px" prop="work_type">
            <!--              童工、公务员、未工作、自营职业或私营职业-->
            <el-select v-model="formData.work_type" placeholder="请选择">
              <el-option label="童工" value="children"></el-option>
              <el-option label="公务员" value="Govt_job"></el-option>
              <el-option label="未工作" value="Never_worked"></el-option>
              <el-option label="自营职业" value="Private"></el-option>
              <el-option label="私营职业" value="Self-employed"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="住宅类型：" style="font-weight: bold;" label-width="120px" prop="Residence_type">
            <el-select v-model="formData.Residence_type">
              <el-option label="农村" value="Rural"></el-option>
              <el-option label="城市" value="Urban"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="血液中的平均葡萄糖水平：" style="font-weight: bold;" label-width="200px" prop="avg_glucose_level">
            <el-input type="number" v-model.number="formData.avg_glucose_level" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="体重指数：" style="font-weight: bold;" label-width="120px" prop="bmi">
            <el-input type="number" v-model.number="formData.bmi" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="吸烟史：" style="font-weight: bold;" prop="smoking_status">
            <el-select v-model="formData.smoking_status">
              <el-option label="以前吸烟过" value="formerly smoked"></el-option>
              <el-option label="从未吸烟" value="never smoked"></el-option>
              <el-option label="吸烟" value="smokes"></el-option>
              <el-option label="未知" value="Unknown"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
      </el-row>
      <el-row>
      </el-row>

      <el-row>
        <el-col :span="24" style="display: flex; align-items: center;">
          <span style="margin-left: 40px; font-weight: bold">模型选择：</span>

          <el-form-item prop="mode">
            <el-select v-model="formData.mode">
            <el-option label="逻辑回归" value="lg"></el-option>
            <el-option label="决策树" value="dt"></el-option>
            <el-option label="KNN" value="knn"></el-option>
            <el-option label="贝叶斯算法建模" value="by"></el-option>
            <el-option label="支持向量机" value="svn"></el-option>
            <el-option label="随机森林" value="rf"></el-option>
            </el-select>

            <el-button type="primary" @click="predictButtonHandler" style="margin-left: 40px">预测</el-button>

          </el-form-item>

          <div style="margin-left: 40px">
            <span v-if="res === 1" style="color: red">中风</span>
            <span v-else-if="res === 0" style="color: blue">不中风</span>
          </div>

        </el-col>
      </el-row>

    </el-form>
  </div>
</template>

<script >
export default {
  name: 'app',
  components: {},
  data () {
    return {
      testFormData:{
        name: ''
      },

      // 表单数据
      formData: {
        gender: '',
        age: 18,
        hypertension: 2,
        heart_disease: 2,
        ever_married: '',
        work_type: '',
        Residence_type: '',
        avg_glucose_level: 0,
        bmi: 0,
        smoking_status: '',
        mode: ''
      },
      //预测结果
      res: 2,
      rules: {
        gender: [
          { required: true, message: '性别不能为空', trigger: 'change' }
        ],
        age: [
          { required: true, message: '年龄不能为空' },
          { type: 'number', message: '年龄必须为数字' }
        ],
        hypertension: [
          { required: true, message: '高血压情况不能为空', trigger: 'change' }
        ],
        heart_disease: [
          { required: true, message: '心脏病情况不能为空', trigger: 'change' }
        ],
        ever_married: [
          { required: true, message: '婚姻状况不能为空', trigger: 'change' }
        ],
        work_type: [
          { required: true, message: '工作类型不能为空', trigger: 'change' }
        ],
        Residence_type: [
          { required: true, message: '住宅类型不能为空', trigger: 'change' }
        ],
        avg_glucose_level: [
          { required: true, message: '血液中的平均葡萄糖水平不能为空' },
          { type: 'number', message: '血液中的平均葡萄糖水平必须为数字' }
        ],
        bmi: [
          { required: true, message: '体重指数不能为空' },
          { type: 'number', message: '体重指数必须为数字' }
        ],
        smoking_status: [
          { required: true, message: '吸烟史不能为空', trigger: 'change' }
        ],
        mode: [
          { required: true, message: '请选择模型', trigger: 'change' }
        ]
      }
    }
  },

  methods: {
    // 预测按钮事件
    predictButtonHandler () {
      this.$refs.form.validate((Valid) => {
        if (Valid) {
          alert('表单验证成功!');
        } else {
          alert('表单验证失败!');
          return false;
        }
      });

      console.log(this.formData)

      this.$http({
        method: 'post',
        url: '/predictHealthcare',
        data: this.formData
      })
        .then(response => {
          if (response.data.code === 200){
            this.res = response.data.data
          }

        })
        .catch(error => {
          console.log(error.message)
        })

      this.res = null

    }
  }
}
</script>


<style scoped>
.form-container {
  display: flex;
  flex-wrap: wrap;

}

.el-row {
  width: 100%;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.el-form-item__label {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

</style>
